<template>
  <div class="box">
    <input type="text" :value="matter" @input="change">
  </div>
</template>

<script>
import { ref, watch } from 'vue'
export default {
  props: {
    modelValue: {
      type: String
    }
  },
  name: 'HInput',
  setup (props, { emit }) {
    const matter = ref('我是原数据')
    watch(() => {
      return props.modelValue
    }, () => {
      matter.value = props.modelValue
    })
    // function matterFn () {
    //   matter.value = props.modelValue
    // }
    function change (e) {
      console.log(e.target.value)
      emit('update:modelValue', e.target.value)
    }
    return {
      matter,
      change
    }
  }
}
</script>

<style scoped lang="less">
  .box {
    height: 300px;
  }
  input {
    height: 50px;
    background-color: red;
    padding: 5px;
  }
</style>
